<script lang="ts" setup>
import {ref} from 'vue'
import {operationLogGetListSerive,operationLogDeleteAllSerive,operationLogAddSerive} from '@/api/operationlog.js'

const params = ref({
    pagenum:1,
    pagesize:10,
    nickname:'',
})
const userList = ref([])
const total = ref(0)
const getUserList = async()=>{
   const res = await operationLogGetListSerive(params.value)
   userList.value = res.data.data.result
   total.value = res.data.data.total
}
getUserList()
const handleSizeChange = async(val:number)=>{
   params.value.pagenum = 1
   params.value.pagesize = val
   getUserList()
}  
const handleCurrentChange =async (val:number)=>{
   params.value.pagenum = val
   getUserList()

}

const Search = async()=>{
  
  //   await  operationLogAddSerive({
  //   operation_type:'搜索操作',
  //   details:`在操作日志模块进行了 搜索操作`,
  //   level:2
  // })
    getUserList()
  ElMessage.success('搜索成功！')
}
const reSet = async()=>{
  params.value.nickname = ''
 
  //   await  operationLogAddSerive({
  //   operation_type:'重置',
  //   details:`在操作日志模块进行了重置操作`,
  //   level:2
  // })
   getUserList()
  ElMessage.success('重置成功！')
}
const deleteAll = async()=>{
  await operationLogDeleteAllSerive()
  // await  operationLogAddSerive({
  //   operation_type:'清空操作',
  //   details:`在操作日志模块进行了清空操作`,
  //   level:1
  // })
  ElMessage.success('清空登录日志成功！')
  getUserList()
}
</script>

<template>
   <div class="wrapped">
     <el-card>
       <div class="wrapped-content">
          <div class="select">
            <div class="input">
            <el-form-item>
                <el-input placeholder="输入操作人进行搜索" v-model="params.nickname"  suffix-icon="Search"/>
            </el-form-item>

             <el-form-item>
                <el-button type="primary" @click="Search"> 搜索</el-button>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="reSet">重置</el-button>
            </el-form-item>
            </div>
            <div class="btn">
                <el-button type="primary" @click="deleteAll">清空操作日志</el-button>

            </div>
          </div>
             <el-table :data="userList" border  style="width: 100%">
             <el-table-column type="index" align="center" label="序号" width="100" />
             <el-table-column prop="nickname" align="center" label="操作人" width="200" />
              <el-table-column prop="details" align="center" label="操作内容" width="300" />
             <el-table-column prop="level" align="center" label="操作等级" width="300" />
              <el-table-column prop="created_time" align="center" label="操作时间" >
              <template #default="{row}">
                  {{row.created_time?.slice(0,16)}}
                </template>
              </el-table-column>
             <template #empty>
            <el-empty description="暂无数据" />
            </template>
             </el-table>       
            <el-pagination
                v-model:current-page="params.pagenum"
                v-model:page-size="params.pagesize"
                :page-sizes="[5, 10, 20, 30]"
                :background="true"
                layout="jumper,total, sizes, prev, pager, next "
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="float: right; margin: 10px 0;"

            />

   </div> 
     </el-card>
   </div>
</template>

<style lang="scss" scoped>
.wrapped{
.wrapped-content{
    height: 600px;
    padding: 0 10px;
    .select{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .input{
            display: flex;
            justify-content: flex-start;
            .el-input,.el-select{
              width: 200px;
              margin-right: 10px;
            }
            .el-button{
                margin-right:10px ;
            }
        }

    }
}
}
</style>